<template>
	<div id="container" class="page-container" :style="{bottom:bottom}">
		<slot name='header'></slot>
		<div class="pull-down-tip" v-if="pulldown">
			<span v-show="loadingConnecting">{{pulldownTip.text}}</span>
		</div>
		<div :ref='refName' class="scroll-container">
			<div class="scroll-contant">
				<slot ></slot>
			</div>
		</div>
	</div>
</template>

<script>

	import BScroll from 'better-scroll'
	//配置详情 请参考  http://ustbhuangyi.github.io/better-scroll/doc/options-advanced.html#bounce
	export default {
		name: 'page',
		props: {
			probeType: {
				type: Number,
				default: 1
			},
			click: {
				type: Boolean,
				default: true
			},
			pullDownRefresh: {
				type: Object,
				default: function() {
					return {
						threshold: 40,
						stop: 40
					}
				}
			},
			pulldown: {
				type: Boolean,
				default: false
			},
			data: {
				type: Array,
				default: null
			},
			refName: {
				type: String,
				default: 'wrapper'
			}
		},
		data() {
			return {
				isLoading: false,
				loadingConnecting: false,
				pulldownTip: {
					text: '下拉刷新', // 松开立即刷新
					rotate: '' // icon-rotate
				},
				bottom: "50px"
			}
		},
		watch: {
//			$route(to, from) {
//
//			}
		},
		mounted() {
			this.$nextTick(()=>{
				this._initScroll();
				setTimeout(()=>{
					this.refresh();
				},500)
				
			})
		},
		methods: {
			_initScroll() {
				var refName = this.refName;
				var _this = this;
				if(!this.$refs[refName]) {
					return
				}

				this.scroll = new BScroll(this.$refs[refName], {
					probeType: this.probeType,
					click: this.click,
					pullDownRefresh: this.pullDownRefresh
				})
				this.scroll.on('scroll', (pos) => {
					if(pos.y < 0) {
						this.loadingConnecting = false
						this.$emit('onScroll', pos)
					} else {
						if(!_this.isLoading) {
							this.loadingConnecting = true
							if(pos.y < 50) {
								this.pulldownTip = {
									text: '下拉刷新', // 松开立即刷新
									rotate: '' // icon-rotate
								}
							} else {
								this.pulldownTip = {
									text: '松开立即刷新',
									rotate: 'icon-rotate'
								}
							}

						}
					}
				})
				this.scroll.on("pullingDown", () => {

					_this.isLoading = true;
					_this.pulldownTip = {
						text: '加载中', // 松开立即刷新
						rotate: '' // icon-rotate
					}
					setTimeout(()=>{
						_this.pullingDownUP()
					},5000)
				})
				this.scroll.on("pullingUp", () => {
//					console.log(dd)
				})
			},
			pullingDownUP() {
				this.scroll.finishPullDown()
				this.scroll.finishPullUp()
				this.scroll.refresh()
				this.isLoading = false
				this.loadingConnecting = false
			},
			enable() {
				this.scroll && this.scroll.enable()
			},
			refresh() {
				this.scroll && this.scroll.refresh()
			}
		},
		watch: {
			data() {
				setTimeout(() => {
					this.pullingDownUP()
				}, 20)
			}
		},
		components:{

		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		position: fixed;
		top: 90px;
		left: 0;
		right: 0;
		overflow: hidden;
		.pull-down-tip {
			position: absolute;
			left: 0;
			right: 0;
			font-size: 30px;
			text-align: center;
			z-index: -1;
			line-height: 50px;
		}
		.scroll-container {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2000;
			.scroll-contant{
				min-height: calc(100% + 5px);
			}
		}
	}
</style>